<template>
  <ContentWrap>
    <div class="content"
      ><el-icon color="#1890ff"><InfoFilled /></el-icon>上次更新时间：{{ time }}
      <strong></strong>
      <span @click="getApi">立即更新</span></div
    >
    <el-table :data="textInfo" style="width: 100%" v-loading="loading">
      <el-table-column label="参数">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-tag
              class="ml-2"
              type="info"
              style="color: #fff"
              :color="scope.row.color"
              effect="light"
              >Tag {{ scope.row.name }}</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="描述">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.text }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="当前值">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.unit }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { ContentWrap } from '@/components/ContentWrap'

import { fillZero, timestamp } from './common'
import {
  getTomcatCreated,
  getSystemByToken,
  getTomcatExpired,
  getTomcatCurrent,
  getTomcatActiveMax,
  getTomcatRejected
} from '@/api/tomcatInfo/index'
const loading = ref(true)
const time = ref('2023年04月06日 10时52分43秒')
const textInfo = ref([
  { name: 'tomcat.sessions.created', color: '#b7eb8f', text: 'tomcat 已创建 session 数', unit: '' },
  { name: 'tomcat.sessions.expired', color: '#b7eb8f', text: 'tomcat 已过期 session 数', unit: '' },
  {
    name: 'tomcat.sessions.active.current',
    color: '#b7eb8f',
    text: 'tomcat 当前活跃 session 数',
    unit: ''
  },
  {
    name: 'tomcat.sessions.active.max',
    color: '#b7eb8f',
    text: 'tomcat 活跃 session 数峰值',
    unit: ''
  },
  {
    name: 'tomcat.sessions.rejected',
    color: '#b7eb8f',
    text: '	超过session 最大配置后，拒绝的 session 个数',
    unit: ''
  }
])

const getApi = async () => {
  let resultByToken = await getSystemByToken({})
  let resultCreated = await getTomcatCreated({})
  let resultExpired = await getTomcatExpired({})
  let resultCurrent = await getTomcatCurrent({})
  let resultActiveMax = await getTomcatActiveMax({})
  let resultRejected = await getTomcatRejected({})
  textInfo.value.map((item) => {
    if (item.name == resultCreated.name) {
      item.unit = resultCreated.measurements[0].value + ' 个'
    }
    if (item.name == resultExpired.name) {
      item.unit = resultExpired.measurements[0].value + ' 个'
    }
    if (item.name == resultCurrent.name) {
      item.unit = resultCurrent.measurements[0].value + ' 个'
    }
    if (item.name == resultActiveMax.name) {
      item.unit = resultActiveMax.measurements[0].value + ' 个'
    }
    if (item.name == resultRejected.name) {
      item.unit = resultRejected.measurements[0].value + ' 个'
    }
  })
  console.log(resultCreated, '--------', textInfo.value)
  let timeDate = new Date(resultByToken.timestamp)
  time.value = `${timeDate.getFullYear()}年${timeDate.getMonth() + 1}月${timeDate.getDate()}日
     ${fillZero(timeDate.getHours())}时${fillZero(timeDate.getMinutes())}分${fillZero(
    timeDate.getSeconds()
  )}秒`
  loading.value = false
}
onMounted(() => {
  getApi()
})
</script>

<style lang="less" scoped>
.content {
  display: flex;
  align-items: center;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  padding: 8px 15px 8px 17px;
  font-size: 14px;
  margin-bottom: 20px;
  i {
    margin-right: 4px;
  }
  strong {
    width: 1px;
    border-left: 1px solid #ccc;
    height: 16px;
    margin: 0 10px;
    display: block;
  }
  span {
    color: #1890ff;
  }
}
</style>
